﻿<!doctype html>
<html>
<head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Education Tutorial Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!--bootstrap-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">

    <link href="BootstrapSouce/css/bootstrap.min.css" rel="stylesheet" />
    <script src="BootstrapSouce/js/jquery.min.js"></script>
    <script src="BootstrapSouce/js/bootstrap.min.js"></script>
    <!--coustom css-->
    <link href="css/style.css" rel="stylesheet" type="text/css" />

    <!--script-->

    <script src="Scripts/jquery-1.8.2.min.js"></script>

    <!-- js -->
    <script src="js/bootstrap.js"></script>
    <link href="css/PLModel.css" rel="stylesheet" />
    <script src="js/PLModel.js"></script>
    <!-- /js -->
    <!--fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400italic,400,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
    <!--/fonts-->
    <!--hover-girds-->
    <link rel="stylesheet" type="text/css" href="css/default.css" />
    <link rel="stylesheet" type="text/css" href="css/component.css" />
    <script src="js/modernizr.custom.js"></script>
    <!--/hover-grids-->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
   

    <!--script-->
    <script type="text/javascript">
        $(function () {
            $('#myTab li:eq(1) a').tab('show');
        });

        jQuery(document).ready(function ($) {
         
     
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 900);
            });
        });
    </script>
    <!--/script-->
</head>
<body >
    <!--header-->
    <div class="header" id="home">
        <nav class="navbar navbar-default">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"> </span>
                        <span class="icon-bar"> </span>
                        <span class="icon-bar"> </span>
                    </button>
                    <h4><a class="navbar-brand" href="index.html">MusicExam<br /><span></span></a></h4>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right margin-top cl-effect-2">
                        <li><a href="index.html"><span data-hover="Home">主页</span></a></li>
                        <li><a href="Online_Video.html"><span data-hover="About">在线视频</span></a></li>
                        <li><a href="Online_Exam.html"><span data-hover="Shortcodes">在线考试</span></a></li>
                        <li><a href="Online_BBS.html"><span data-hover="Shortcodes">论坛中心</span></a></li>
                        <li><a href="Online_College.html"><span data-hover="Gallery">学院试题</span></a></li>
                        <li><a href="Online_Myself.html"><span data-hover="Contact">个人中心</span></a></li>
                    </ul>
                    <div class="clearfix"> </div>
                </div><!-- /.navbar-collapse -->
                <!-- /.container-fluid -->
                <div class="login-pop">
                    <div id="loginpop">
                        <a href="#" id="loginButton"><span>登录</span></a>
                        <div id="loginBox">
                            <form id="loginForm">
                                <fieldset id="body">
                                    <fieldset>
                                        <label for="email">账号</label>
                                        <input type="text" id="email">
                                    </fieldset>
                                    <fieldset>
                                        <label for="password">密码</label>
                                        <input type="password" id="password">
                                    </fieldset>
                                    <input type="submit" id="login" value="登录">
                                    <a style="float:right" type="submit" id="login" href="Online_Regin.html">注册</a>
                                </fieldset>

                            </form>
                        </div>
                    </div>
                </div>
                <script src="js/menu_jquery.js"></script>
            </div>
        </nav>
        <!--/script-->
        <div class="clearfix"> </div>
    </div>
    <div class="banner banner5">
        <div class="container">
            <h2 style="color:#000000"></h2>
            <ul id="myTab" class="nav nav-tabs" style="width:377px; float:right">
                <li class="dropdown">
                    <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" style="color:#000000;font-weight:bold;">专业考试<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                        <li><a href="#jmeter" tabindex="-1" data-toggle="tab" style="color:#E1009F"> 乐理考试</a> </li>
                        <li><a href="#ejb" tabindex="-1" data-toggle="tab" style="color:#E1009F">视唱练耳</a> </li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" style="color:#000000;font-weight:bold;">非专业考试<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                        <li><a href="#Cnyu" tabindex="-1" data-toggle="tab" style="color:#E1009F;"> 国内业余</a> </li>
                        <li><a href="#ejb" tabindex="-1" data-toggle="tab" style="color:#E1009F;"> 国外业余</a> </li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" style="color:#000000;font-weight:bold;">国外专业考试<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                        <li><a href="#jmeter" tabindex="-1" data-toggle="tab" style="color:#E1009F;"> 国外业余余</a> </li>
                        <li><a href="#ejb" tabindex="-1" data-toggle="tab" style="color:#E1009F;"> 国外业余</a> </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div style="width: 100%; height: 800px;"> 

       <div id="myTabContent" class="tab-content">

            <div class="tab-pane fade" id="jmeter" style="width:100%;height:800px; background-color:#ff6a00">

            </div>
           <div class="tab-pane fade" id="Cnyu" style="width:100%;height:800px;">
               <div class="btn-group-vertical">
                   <ul id="myTab" class="nav nav-tabs">
                       <li><a type="button" class="btn btn-warning" href="#Cjyj" data-toggle="tab">初级音基考试</a></li>

                       <li><a type="button" class="btn btn-warning" href="#Zjyj" data-toggle="tab">中级音基考试</a></li>

                   </ul>
               </div>
               <div id="myTabContent" class="tab-content">
                   <div class="tab-pane fade in active" id="Cjyj">
                       <div style="margin-top:10px;">
                           <ul>
                               <li style="font-weight:bold; color:#000000"><span>1.</span>请识别下图中的乐器名称选择（）</li>
                               <li style="color:#000000"><img src="Image/d7ca8f1d8ba369459bd7bdc79f6b6d0c.png" /></li>
                               <li style="color:#000000"><span><input type="radio" /></span>A.吉他</li>
                               <li style="color:#000000"><span><input type="radio" /></span>B.琵琶</li>
                               <li style="color:#000000"><span><input type="radio" /></span>C.钢琴</li>
                               <li style="color:#000000"><span><input type="radio" /></span>D.小提琴</li>
                               <li style="color:#000000"><input class="btn btn-success" value="提交" /></li>
                           </ul>
                           <br />                      
                       </div>
                   </div>

                   <div class="tab-pane fade in active" id="Zjyj">
                       <div style="margin-top:10px;">
                           <ul>
                               <li style="font-weight:bold; color:#000000"><span>1.</span>根据音响，选择出合适的速度术语()</li>
                               <li style="color:#000000"><img src="Image/五线谱.png" /> </li>
                               <li style="color:#000000"><span><input type="radio" /></span>A、Andante </li>
                               <li style="color:#000000"><span><input type="radio" /></span>B、 Lento</li>
                               <li style="color:#000000"><span><input type="radio" /></span>C、Presto </li>
                               <li style="color:#000000"><span><input type="radio" /></span>D、Allegretto </li>
                               <li style="color:#000000"><input class="btn btn-success" value="提交" /></li>
                           </ul>
                           <br />
                       </div>
                   </div>



                   </div>
               </div>
               <div id="myTabContent" class="tab-content">
                   <div class="tab-pane fade " id="Cjyj">
                       <div style="margin-top:10px;">
                           
                       </div>
                   </div>
               </div>
                       <div class="tab-pane fade" id="ejb" style="width:100%;height:800px; background-color:#4cff00"> </div>


                   </div>
                   <img src="Image/297430.jpg" style="height:100%" />

               </div>


               <div class="copyright">
                   <!-- container -->
                   <div class="container">
                       <div class="text-center">
                           <p>Copyright &copy; 2015.Company name All rights reserved.</p>
                       </div>
                       <!--<div class="copyright-right">
                    <ul>
                        <li><a href="#" class="twitter"> </a></li>
                        <li><a href="#" class="twitter facebook"> </a></li>
                        <li><a href="#" class="twitter chrome"> </a></li>
                        <li><a href="#" class="twitter pinterest"> </a></li>
                        <li><a href="#" class="twitter linkedin"> </a></li>
                        <li><a href="#" class="twitter dribbble"> </a></li>
                    </ul>
                </div>-->
                       <div class="clearfix"> </div>

                   </div>
                   <!-- //container -->
                   <!---->
                   <script type="text/javascript">
                       $(document).ready(function () {
                           /*
                           var defaults = {
                           containerID: 'toTop', // fading element id
                           containerHoverID: 'toTopHover', // fading element hover id
                           scrollSpeed: 1200,
                           easingType: 'linear'
                           };
                           */
                           $().UItoTop({ easingType: 'easeOutQuart' });
                       });
                   </script>
                   <a href="#to-top" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
                   <!---->
               </div>
               <!--/copy-rights-->
</body>
</html>
